<%@ page language="java" contentType="text/html" import="com.dao.*,com.beans.*,java.util.*" pageEncoding="utf-8"%>
<%String path = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"  %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/edittable.css"></link>
<link rel="stylesheet" type="text/css" href="css/validate.css"></link>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

<script>

	$(function() {
		
		$("input[type=text],textarea").focus(function() {
			$(this).addClass("input_focus");
		}).blur(function() {
			$(this).removeClass("input_focus");
		});

		$(".form_btn").hover(function() {
			$(this).css("color", "red").css("background", "#6FB2DB");
		},

		function() {
			$(this).css("color", "#295568").css("background", "#BAD9E3");
		});
		
		var ok1=false;/* 一级分类名称验证*/
		var ok2=false;/* 二级分类名称验证*/
		
		$("#bigCate").blur(function() {/* 一级分类验证*/
			if ($(this).val()==-1){
				$("#bigCate_msg").text("未选择一级分类!").removeClass().addClass("validate_error");
				ok1=false;
			}else{
				$("#bigCate_msg").text("√").removeClass().addClass("validate_ok");
				ok1=true;
			}  
		});
		
		$("#smallCateName").blur(function() {/* 二级分类验证*/
			var smallCateName=$("#smallCateName").val();//当前用户输入的值
			var flag=false;
			
		  	var reg = /[^\s]{4,20}/; //4-20位；非空白字符
			if (!reg.test(smallCateName)){
				$("#smallCateName_msg").text("分类名格式非法!").removeClass().addClass("validate_error");
				ok2=false;
			}else{
				$("#smallCateName_msg").text("√").removeClass().addClass("validate_ok");
				ok2=true;
			}  
		});
		
		$("#bigCate").focus(function() {
			$("#bigCate_msg").text("请选择一级分类").removeClass().addClass("validate_info");
		});
		
		$("#smallCateName").focus(function() {
			$("#smallCateName_msg").text("4-20位；非空白字符").removeClass().addClass("validate_info");
		});
		
		$("#form_btn").click(function(){/* 提交的总验证 */
			var result=false;
			$("#smallCateName").blur();
			$("#bigCate").blur();
			if(ok2&& ok1){
				result=true;
            }else{
            	$("#result_msg").text("信息填写有误").removeClass().addClass("validate_error");
            	return result;
            }
			if(result==true){
				result=confirm("确定要提交吗");
			}
			return result;

        });
		
	});
	
</script>

</head>

<body>

	<%
		CateDao _cateDao=new CateDao();
		List<CateInfo> cateList=_cateDao.getCateList(0);
		request.setAttribute("cateList", cateList);
	%>
	
	<div class="div_title">
		<div class="div_titlename">
			<img src="images/san_jiao.gif"><span>分类管理 | 添加二级分类</span>
		</div>
	</div>

	<form id="updatesmallCate_form" action="CateServlet.do?flag=updateSmall" method="post">
	<input type="hidden" name="smallCateId" value="${cateSmall.id}">
		<table class="edit_table">
			<tr>
				<td class="td_info">
					父级分类:
				</td>
				
				<td class="td_input_short">
					<select id="bigCate" name="bigCate">
						<option value="-1">===请选择所属的一级分类===</option>
						<c:forEach var="cate" items="${cateList}">
							<c:if test="${cate.id==cateSmall.parentId}"><!-- 回显 -->
								<option value="${cate.id}" selected="selected">${cate.cateName}</option>
							</c:if>
							<c:if test="${cate.id!=cateSmall.parentId}">
								<option value="${cate.id}">${cate.cateName}</option>
							</c:if>
						</c:forEach>
					</select>
				</td>
				<td>
					<label class="validate_info" id="bigCate_msg">请选择一级分类</label>
				</td>
			</tr>
		
			<tr>
				<td class="td_info">
					分类名称:
				</td>
				<td class="td_input_short">
					<input type="text" class="txtbox"id="smallCateName" name="smallCateName" value="${cateSmall.cateName}"/>
				</td>
				<td>
					<label class="validate_info" id="smallCateName_msg">4-20位；非空白字符</label>
				</td>
			</tr>
			
			<tr>
				<td class="td_info">
					备注信息:
				</td>
				<td>
					<textarea rows="4" cols="27" name="smallCatedes" style="resize:none" class="txtarea" >${cateSmall.des}</textarea>
				</td>
				<td>
					<label></label>
				</td>
			</tr>
			<tr>
				<td class="td_info"></td>
				<td>
					<input id="form_btn" class="form_btn" type="submit" value="提交" /> 
					<input id="reset" type="reset" class="form_btn" value="重置" />
				</td>
				<td>
					<label id="result_msg" class="result_msg">${msg}</label>
				</td>
			</tr>
		</table>
	</form>
	
</body>
</html>
